<!doctype html>
<%@page import="com.googlecode.grima.domain.DescriptiveItem"%>
<%@page import="java.util.List"%>
<%@page import="com.googlecode.grima.domain.Descriptive"%>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<style>
	.datagrid-row-selected {
	  background: #fff;
	}
	.datagrid-row-over{
	  background: #fff;
	}
	.datagrid-body .datagrid-editable .datagrid-editable-input {
	  margin: 0;
	  height: 160px;
	  border-width: 1px;
	  border-style: solid;
	}
</style>


<meta charset="UTF-8">
<table id="dg" class="easyui-datagrid" title="" style="height:440px"
		data-options="
			iconCls: 'icon-edit',
			singleSelect: true,
			toolbar: '#tb',
			method: 'get',
			onClickRow: onClickRow">
	<thead data-options="frozen:true">
		<tr>
			<th data-options="field:'id',width:40">ID</th>
			<th data-options="field:'action',hidden:true">Action</th>
			<th data-options="field:'reference',width:100,align:'left',editor:'textarea'">Referência</th>
			<th data-options="field:'description',width:200,align:'left',editor:'textarea'">Descrição</th>
			<th data-options="field:'status',width:130,styler:styleStatus,
					editor:{
						type:'combobox',
						options:{
							valueField:'label',
							textField:'value',
							data: [
							<c:forEach items="${statuses}" var="st" >
								{
									label: '${st.name}',
									value: '${st.name}'
								},
							</c:forEach>
								]							
						}
					}">Status</th>
		</tr>
	</thead>
	<thead>
		<tr>
			<th data-options="field:'sizes',width:100,align:'center',editor:'textarea'">Tamanhos</th>
			<th data-options="field:'colors',width:200,align:'center',editor:'textarea'">Cores</th>
			<th data-options="field:'setas',width:200,align:'left',editor:'textarea'">Setas</th>
			<th data-options="field:'imagem',width:200">Imagem</th>
			<th data-options="field:'fotografarTambem',width:200,align:'left',editor:'textarea'">Fotografar Também</th>
			<th data-options="field:'lookbookCor',width:200,align:'left',editor:'textarea'">Lookbook Cor</th>
			<th data-options="field:'correcoes',width:200,align:'left',editor:'textarea'">Correções</th>
			<th data-options="field:'comments',width:250,editor:'textarea'">Observações</th>
		
		</tr>
	</thead>

	<c:forEach items="${items}" var="item" varStatus="status">

		<tr>
		    <td>${item.id}</td>
		    <td>${item.action}</td>
		    <td>${item.reference}</td>
		    <td>${item.description}</td>
			<td>${item.status}</td>
			
			<td>${item.sizes}</td>
			<td>${item.colors}</td>
			<td>${item.setas}</td>
			<td>
				<a href="#" onclick="editImage(${item.id});">
					<img src="<%=request.getContextPath()%>/descriptive?id=${descriptive.id}&reference=${item.reference}">
				</a>
			</td>
			<td>${item.fotografarTambem}</td>
			<td>${item.lookbookCor}</td>
			<td>${item.correcoes}</td>
			<td>${item.comments}</td>

		</tr>
		
		<div id="hiddenFields"> 
			<!-- aqui serao inseridos dinamicamente os campos hidden de cada item -->
		</div>		
	
	</c:forEach>

</table>

<div id="details" class="easyui-window" title="Detalhes do Item" data-options="modal:true,closed:true" style="width:800px;height:500px;padding:10px;">
	<!--<jsp:include page="itemDetails.jsp" /> -->
</div>

<div id="history" class="easyui-window" title="Histórico" data-options="modal:true,closed:true" style="width:800px;height:500px;padding:10px;">
	<div style="margin:5px">
		<a href="#" title="Voltar" onclick="closeHistory();"><i class="fa fa-mail-reply" style="font-size:18px;color:green;padding:5px;"></i>Voltar</a>
	</div>
	<br/>
	  
	<table id="dgHistory" class="easyui-datagrid" title=""
			data-options="rownumbers:true,singleSelect:true,method:'get',pagination:true,fitColumns:true">
		<thead>
			<tr>
				<th data-options="field:'date',width:80">Data</th>
				<th data-options="field:'time',width:60">Hora</th>
				<th data-options="field:'user',width:70">Usuário</th>
				<th data-options="field:'field',width:70">Campo</th>
				<th data-options="field:'from',width:100">Alterado De</th>
				<th data-options="field:'to',width:100">Para</th>
			</tr>
		</thead>
	</table>
</div>

<div id="itemImageUpload" class="easyui-window" title="Upload de Imagem" data-options="modal:true,closed:true" style="width:600px;height:350px;padding:5px;">
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'center'" style="padding:10px;">
		    <form id="ff" method="post">
		    	<table>
		    		<tr>
		    			<td>&nbsp;</td>
		    		</tr>
		    		<tr>
		    			<td>Imagem:</td>
		    			<td>
							<img src="../img/user.jpg" height="128" width="128">
		    				<input type="file" id="itemImage" />
		    			</td>
		    		</tr>
		    	</table>
		    </form>

		</div>
		<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
			<a class="easyui-linkbutton" href="javascript:void(0)" onclick="javascript:saveImage();">Salvar</a>
			<a class="easyui-linkbutton" href="javascript:void(0)" onclick="javascript:closeImage();">Cancelar</a>
		</div>
	</div>
</div>


<div id="tb" style="height:auto">
	<a href="#" title="Novo" onclick="insert();"><i class="fa fa-plus" style="font-size:18px;color:green;padding:5px;"></i>Novo</a>
	<a href="#" title="Importar"><i class="fa fa-download" style="font-size:18px;color:green;padding:5px;"></i>Importar</a>
	<a href="#" title="Exportar"><i class="fa fa-file-excel-o" style="font-size:18px;color:green;padding:5px;"></i>Exportar</a>
	<a href="#" title="Histórico" onclick="history();"><i class="fa fa-history" style="font-size:18px;color:green;padding:5px;"></i>Histórico</a>
</div>

	<script type="text/javascript">
	
		$(document).keypress(function(e) {
			if (e.which == 13){
				if (!e.shiftKey){
					endEditing();
				}
			}
		});
		
		$(document).keyup(function(e) {
			if (e.which == 27){
				endEditing();
			}
		});

		$(document).keyup(function(e){
		    if(e.keyCode == 46){ 
		    	removeit();
		    }
		}); 

		var editIndex = undefined;

		function endEditing(){
			if (editIndex == undefined){return true;}
			if ($('#dg').datagrid('validateRow', editIndex)){
				$('#dg').datagrid('endEdit', editIndex);
				editIndex = undefined;
				var row = $('#dg').datagrid('getSelected');
				row.action = 'save';
				return true;
			} else {
				return false;
			}
		}
		function onClickRow(index){
			if (editIndex != index){
				if (endEditing()){
					$('#dg').datagrid('selectRow', index)
							.datagrid('beginEdit', index);
					editIndex = index;
				} else {
					$('#dg').datagrid('selectRow', editIndex);
				}
			}
		}
		function insert(){
			$('#dg').datagrid('appendRow', {
				index: editIndex,
				row:{
				}
			});
			$('#tt').datagrid('selectRow',editIndex);
			$('#tt').datagrid('beginEdit',editIndex);
		}
		function removeit(){
			var row = $('#dg').datagrid('getSelected');
			row.action = 'delete';
			var index = $('#dg').datagrid('getRowIndex', row);
			$.messager.confirm('Aviso', 'Confirma exclusão?', function(r){
				if (r){
					$('#hiddenFields').append('<input type="hidden" id="delete_'+index+'" name="deleteItems['+index+'].id" value="'+row.id+'" />');
					$('#dg').datagrid('cancelEdit', index).datagrid('deleteRow', index);
					editIndex = undefined;
				}
			});
		}
		function accept(){
			if (endEditing()){
				$('#dg').datagrid('acceptChanges');
			}
		}
		function reject(){
			$('#dg').datagrid('rejectChanges');
			editIndex = undefined;
		}
		function details(){
			$('#details').window('open');
		}
		function history(){
			$('#history').window('open');
		}
		function closeHistory(){
			$('#history').window('close');
		}
		function styleStatus(val,row,index){
			var ret = '';
			<c:forEach items="${statuses}" var="st">
				if (row.status == '${st.name}'){
					var backgroundColor = '${st.backgroundColor}';
					var fontColor = '${st.fontColor}';
					ret = 'background-color:'+backgroundColor+";color:"+fontColor;
				}
			</c:forEach>
			return ret;
		}
		function editImage(itemId){
			$('#itemImageUpload').window('open');
		}
		function saveImage(){
			$('#itemImageUpload').window('close');
		}
		function closeImage(){
			$('#itemImageUpload').window('close');
		}
	</script>

